import { CheckCircle } from 'lucide-react'
import { useNavigate } from 'react-router-dom'

export default function EmptyState() {
  const navigate = useNavigate()
  
  return (
    <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
      <div className="w-16 h-16 bg-theme-bg-tertiary rounded-full flex items-center justify-center mb-4">
        <CheckCircle size={32} className="text-gray-400" />
      </div>
      <h3 className="text-lg font-medium text-text-primary mb-2">
        今天没有待办事项
      </h3>
      <p className="text-sm text-text-secondary mb-6 max-w-sm">
        恭喜！您已经完成了所有任务，或者可以添加一些新的待办事项。
      </p>
      <button 
        onClick={() => navigate('/create')}
        className="btn-primary"
      >
        添加新任务
      </button>
    </div>
  )
}
